<template>
  <div>
    <p>您输入的地址有误！</p>
    <!-- 声明式导航 -->
    <!-- to 必填属性，链接的目标地址 -->
    <!-- tag 指定当前链接的标签名 -->
    <!-- active-class：指定链接别激活时拥有的class，默认是router-link-active -->
    <!-- replace 替换当前地址，而不是新增一条历史记录 -->
    <router-link to="/index" active-class="aaa" tag="button" replace>返回首页</router-link>
    <br>
    <router-link to="/404" active-class="aaa" tag="div">去404</router-link>
    <br>
    <router-link to="/contact?id=666&price=200" active-class="aaa">去通讯录</router-link>
    <br>
    <!-- 当路由的path很长的时候，可以通过name代替path -->
    <router-link :to="{name: 'one'}">命名路由-index</router-link>
    <!-- 编程式导航 -->
    <hr>
    <button @click="changePage('/index')">返回首页</button>
    <button @click="changePage('/404')">去404</button>
    <button @click="changePage('/contact')">去通讯录</button>
    <button @click="back">后退一页</button>
    <button @click="forward">前进一页</button>
  </div>
</template>

<script>
export default {
  created() {
    // 获取当前路由信息-route，当前的路由对象
    console.log(this.$route);
  },
  methods: {
    changePage(url) {
      // 编程式导航-适合复杂的逻辑
      // 很多逻辑...
      // this.$router.push(url) // 跳转页面-router，是全局的路由实例
      this.$router.push({
        path: url,
        query: {
          id: 777,
          price: 800
        }
      })
    },
    back() {
      this.$router.back()
    },
    forward() {
      this.$router.forward()
    }
  }
}
</script>

<style>
  .aaa {
    color: red
  }
</style>